import React, { Component,PropTypes } from 'react'
import { TabBar } from '../footer'
import { ProjectTotal, ProjectIntro } from './'
import { Modal, Icon } from 'antd-mobile'
import { myFetch, config, helper } from '../utils'
import moment from 'moment'
import { hashHistory } from 'react-router'

export default class ProjectModalDetail extends Component {
  constructor() {
    super()
    this.state ={
      data: {},
      succeed: false,
    }
    this.onFetchDetail = this.onFetchDetail.bind(this)
    this.onFocusClick = this.onFocusClick.bind(this)
    this.onUnFocusClick = this.onUnFocusClick.bind(this)
  }
  onFocusClick(id) {
   const options = {
      method: 'POST',
      body: ''
   }
   myFetch(`${config.rootApi}/project/follow/${id}`,options, true, false)
      .then(rs => {
        this.setState({
          succeed: rs.succeed
        })
      })
      .catch(err => helper.onPromiseError(err))
  }
  onUnFocusClick(id) {
     const options = {
        method: 'POST',
        body: ''
     }
     myFetch(`${config.rootApi}/project/unfollow/${id}`,options, true, false)
      .then(rs => {
        if (rs.succeed) {
          this.setState({
            succeed: false
          })
        }
      })
      .catch(err => helper.onPromiseError(err))
  }
  onFetchDetail(id) {
    const options = {
      method: 'POST',
      body: ''
    }
    myFetch(`${config.rootApi}/project/${id}/detail`,options, true)
      .then(rs => {
        this.setState({
          data: rs.value
        })
      })
      .catch(err => helper.onPromiseError(err))
  }
  componentDidMount() {
    let id = this.props.location.query.id
    this.onFetchDetail(id)
  }
  render() {
    const id1 = this.props.location.query.id
    return (
      <div
        className="rt-project-detail"
      >
        <div className="-project-top">
          <div
            className="-first"
            onClick={
              () => {
                hashHistory.goBack()
              }
            }
          >
            <Icon type="left"/>
          </div>
          <div className="-two">
            <img src={require('../../statics/images/share_bg2_logo.png')}/>
          </div>
          <div
            className={this.state.succeed ? "-three -grey" : "-three"}
            onClick={
              () => {
                if (this.state.succeed) {
                  this.onUnFocusClick(id1)
                } else {
                  this.onFocusClick(id1)
                }
              }
            }
          >
            <em>
              <img src={require('../../statics/images/icon_heart.png')} />
            </em>
            <span>{this.state.succeed ? '已关注' : '关注'}</span>
          </div>
        </div>
        <div className="-project-body cm-scrollable-container">
          <ProjectTotal data={this.state.data}/>
          <ProjectIntro data={this.state.data}/>
        </div>
        <div className="-item-bottom">
          <span
            className="-btn1"
            onClick={
              () => {
                hashHistory.push({
                  pathname: '/share/project',
                  query: {
                    id: id1
                  }
                })
              }
            }
          >
            <img src={require('../../statics/images/icon_share_s.png')} />
            <em>分享</em>
          </span>
          <span className="-btn2">
            <img src={require('../../statics/images/icon_chat.png')} />
            <em>咨询</em>
          </span>
          <span className="-btn3">
            查阅资料
          </span>
        </div>
      </div>
      )
  }
}